import React from "react";
import LeftMenu from "./left";
import RightMenu from "./right";
import MainContent from "./content";
import { inject, observer } from "mobx-react";
import SourceCodeEditor from './script-code/';

@inject('edcFormDesignerStore')
@observer
export default class FormDesignerMain extends React.Component {
  render() {
    const { 
      leftMenuStore, componentStore, codeBlock, isScriptVisible, onEditorValueChange
    } = this.props.edcFormDesignerStore;

    return (
      <div className='ef-main'>
        <div>
          <LeftMenu ecId={`${this && this.props && this.props.ecId || ''}_LeftMenu@cjqepj`} 
            datas={leftMenuStore.formComs} 
            onDragEnd={componentStore.addComponent}
          />
          <RightMenu ecId={`${this && this.props && this.props.ecId || ''}_RightMenu@e4uxn0`} />
          <MainContent ecId={`${this && this.props && this.props.ecId || ''}_MainContent@yeuu8m`} store={componentStore} />
        </div>
        <SourceCodeEditor ecId={`${this && this.props && this.props.ecId || ''}_SourceCodeEditor@44ed7n`}
          store={componentStore}
          codeBlock={codeBlock} 
          onValueChange={onEditorValueChange} 
          visible={isScriptVisible}
        />
      </div>
    );
  }
}